<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>发现</p>
    </header>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <input
        type="text"
        placeholder="搜索你喜欢的商家名称..."
        v-model="searchQuery"
        @input="searchBusiness"
      />
    </div>

    <!-- 搜索结果部分 -->
    <div class="search-results">
      <ul v-if="filteredBusinessList.length > 0">
        <li
          v-for="business in filteredBusinessList"
          :key="business.businessId"
          @click="goToBusiness(business.businessId)"
        >
          {{ business.businessName }}
        </li>
      </ul>
      <!-- 如果没有搜索结果，展示提示信息 -->
      <p v-else-if="searchQuery.trim() !== ''" class="no-results">
        没有找到相关商家或商品
      </p>
    </div>

    <!-- 推荐商家 -->
    <div class="section">
      <h2>推荐商家</h2>
      <ul class="business-list">
        <li v-for="business in recommendedBusinesses" :key="business.businessId">
          <img :src="business.businessImg" :alt="business.businessName" />
          <div @click="goToBusiness(business.businessId)">
            <h3>{{ business.businessName }}</h3>
            <p>{{ business.businessExplain }}</p>
          </div>
        </li>
      </ul>
    </div>

    <ul class="block">
      <p>
        &nbsp;
      </p>  
	  </ul>
  
    <!-- 底部菜单部分 -->
    <Footer />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Footer from "../components/Footer.vue";
import axios from "axios";
import { useRouter } from "vue-router";

export default {
  name: "Discover",
  components: { Footer },
  setup() {
    const searchQuery = ref(""); // 用于存储搜索输入内容
    const filteredBusinessList = ref([]); // 存储搜索结果
    const recommendedBusinesses = ref([]); // 存储推荐商家
    const router = useRouter();

    // 获取推荐商家数据
    const fetchData = () => {
      axios
        .get("/Business/orderTypeId/1/limit/7", {
          params: {
            orderTypeId: 1, // 传递的商家类型ID
            limit: 7, // 传递的数量限制，指定返回8个随机商家
          },
        })
        .then((response) => {
          recommendedBusinesses.value = response.data; // 显示返回的7个随机商家
        })
        .catch((error) => {
          console.error("Error fetching recommended businesses:", error);
        });
    };

    // 模糊搜索商家
    const searchBusiness = () => {
      if (searchQuery.value.trim()) {
        axios
          .get("/Business/search", {
            params: {
              name: searchQuery.value,
            },
          })
          .then((response) => {
            filteredBusinessList.value = response.data; // 设置搜索结果
          })
          .catch((error) => {
            console.error("Error searching businesses:", error);
            filteredBusinessList.value = []; // 发生错误时清空搜索结果
          });
      } else {
        filteredBusinessList.value = []; // 清空输入时清空搜索结果
      }
    };

    // 跳转到商家详情
    const goToBusiness = (businessId) => {
      router.push({ path: "/businessInfo", query: { businessId } });
    };

    onMounted(() => {
      fetchData();
    });

    return {
      searchQuery,
      filteredBusinessList,
      recommendedBusinesses,
      searchBusiness,
      goToBusiness,
    };
  },
};
</script>

<style scoped>
/* 使用你提供的样式 */
.wrapper {
  width: 100%;
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
  padding-bottom: 14vw; /* 确保底部菜单不会覆盖内容 */
  box-sizing: border-box; /* 包括内边距在内计算总宽高 */
  position: relative; /* 确保内容区域相对于视口 */
}

.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .search-bar {
  margin-top: 12vw; /* 确保不被header遮盖 */
  padding: 10px;
  background-color: #f1f1f1;
}

.wrapper .search-bar input {
  width: 95%; /* 调整宽度为容器的80% */
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 4vw;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.wrapper .search-results {
  background-color: #fff;
  position: absolute;
  top: 25vw; /* 让搜索结果紧挨着搜索框下方 */
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* 与搜索框宽度保持一致 */
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  border-radius: 2px; /* 增加圆角，使得更美观 */
}

/* 推荐商家部分和热门商品部分的样式 */
.wrapper .section {
  margin-top: 2vw; /* 确保与搜索栏有适当间距 */
  padding: 10px;
}

.wrapper .section h2 {
  font-size: 4vw;
  margin-bottom: 10px;
}

/* 通用列表样式 */
.wrapper .business-list,
.wrapper .product-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 列表项样式 */
.wrapper .business-list li,
.wrapper .product-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px; /* 添加内边距 */
}

/* 图片样式 */
.wrapper .business-list li img,
.wrapper .product-list li img {
  width: 100px; /* 固定宽度 */
  height: 100px; /* 固定高度 */
  object-fit: cover; /* 适应容器 */
  margin-right: 10px;
}

/* 列表项内容样式 */
.wrapper .business-list li div,
.wrapper .product-list li div {
  flex: 1;
}

/* 热门商品按钮样式 */
.wrapper .product-list li button {
  background-color: #0097ff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.wrapper .block{
  padding-bottom: 10vw;
}
</style>


